<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<body>
<head>
    <th:block th:include="include :: header('部门管理')"/>
</head>
<body>
<div class="layui-layout layui-layout-iframe">
    <div class="layui-fluid">
        <div class="layui-card">
            <!--search form-->
            <form class="layui-form layui-card-header layuiadmin-card-header-auto search-form" id="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">部门名称</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="deptName" placeholder="" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">部门状态</label>
                        <div class="layui-input-inline input-sm">
                            <select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button  type="button" class="layui-btn layuiadmin-btn-list" data-type="reload" lay-submit lay-filter="form-search" id="form-search">搜索</button>
                    </div>
                </div>
            </form>
            <!--table actcion-->
            <div class="layui-card-body">
                <script type="text/html" id="table_dept_toolbar">
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-sm" lay-event="toolbar-dept-add" shiro:hasPermission="system:dept:add"><i class="layui-icon">&#xe654;</i>新增</button>
                        <button class="layui-btn layui-btn-sm" lay-event="toolbar-dept-expand" data-value="expand">折叠/展开</button>
                    </div>
                </script>
                <table id="table_dept" lay-filter="table_dept"></table>
                <script type="text/html" id="col_operation">
                    <a shiro:hasPermission="system:dept:add"  href="javascript:;" lay-event="addChild">新增</a><span class="splitor">|</span>
                    <a shiro:hasPermission="system:dept:edit"  href="javascript:;" lay-event="edit">编辑</a><span class="splitor">|</span>
                    <a shiro:hasPermission="system:dept:remove" href="javascript:;" lay-event="del">删除</a>
                </script>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:dept:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:dept:remove')}]];
    var prefix = ctx + "system/dept";
</script>
<script>
    layui.use(['treeTable', 'common'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            common = layui.common,
            table = layui.treeTable;
        //页面事件列表
        var active = {
            reload: function () {
                search();
            },
            remove: function (ids) {
                common.ajaxRemove(prefix + "/remove/" + ids, "", function (res) {
                    active['reload'].call(this);
                });
            }
        };
        //查询表单
        form.on('submit(form-search)', function (data) {
            search();
        });
        //表格初始化
        $('.layui-fluid').css('height',$('body').height()+'px');
        $('.layui-card').css('height','inherit');
        table.render({
            id: 'table_dept'
            , elem: '#table_dept'
            , height: $('.layui-card').height()-$('.search-form').outerHeight()
            , url: prefix + "/listTreeGridData" //数据接口
            , toolbar: '#table_dept_toolbar'
            , icon_key: 'deptName'
            , top_value: 0
            , idField: 'deptId'
            , treeId: 'deptId'
            , treeUpId: 'parentId'
            , treeShowName: 'deptName'//以树形式显示的字段
            , heightRemove: [".dHead", 10]//不计算的高度,表格设定的是固定高度，此项不生效
            , isFilter: false
            , iconOpen: false
            , isOpenDefault: true
            , loading: true
            , method: 'get'
            , isPage: false
            ,done: function () {
                //treetable 头部工具栏
                bindTableToolbar();
            }
            , is_checkbox: true
            , is_cache: true
            , cols: new Array([
                {field: 'deptName', title: '部门名称'}
                , {field: 'orderNum', title: '排序', width: 150}
                , {
                    field: 'status', title: '状态', width: 80,align: 'center', templet: function (item) {
                        if (item.status === "0") {
                            return "<span class=\"layui-btn layui-btn-xs layui-btn-radius\">正常</span>";
                        } else {
                            return "<span class=\"layui-btn layui-btn-xs layui-btn-danger layui-btn-radius\">停用</span>";
                        }
                    }
                }
                , {field: 'createTime', title: '创建时间', width: 160}
                , {title: '操作',align: 'center', width: 150, toolbar: '#col_operation'}
            ])
        });

        //表格事件
        table.on('tool(table_dept)', function (obj) {
            switch (obj.event) {
                case 'addChild':
                    showSaveDialog('新增部门', prefix + '/add/' + obj.data.deptId, 'btn-add');
                    break;
                case 'edit':
                    showSaveDialog('修改部门', prefix + '/edit/' + obj.data.deptId, 'btn-edit');
                    break;
                case 'del':
                    active['remove'].call(this, obj.data.deptId);
                    break;
            }
        });
    });
    //表格头部工具栏
    function bindTableToolbar(){
        //表格工具栏
        $("[lay-event=toolbar-dept-add]").click(function () {
            showSaveDialog('新增部门', prefix + '/add/0','btn-add');
        });
        $("[lay-event=toolbar-dept-expand]").click(function () {
            var dataValue=$.trim($(this).attr('data-value'));
            if(dataValue=='expand'){
                layui.treeTable.treeOpenAll('table_dept', false);
                $(this).attr('data-value','eclipse');
            }else{
                layui.treeTable.treeOpenAll('table_dept', true);
                $(this).attr('data-value','expand');
            }
        });
    }
    //展示保存表单弹出层
    function showSaveDialog(title, url, formSubmitBtnId) {
        layer.open({
            type: 2,
            title: title,
            shade: false,
            fixed: false,
            area: ['800px', '450px'],
            content: url,
            btn: ["保存", "取消"],
            yes: function (index, layero) {
                var submitID = formSubmitBtnId;//表单提交按钮id
                var submit = layero.find('iframe').contents().find('#' + submitID);//button obj
                layero.find('iframe')[0].contentWindow.successCallback = function () {
                    parent.layer.closeAll();
                    parent.layer.alert('保存成功');
                    parent.search(); //刷新表格数据
                };
                submit.trigger('click');
            }
            , cancel: function (index, layero) {
                layui.layer.close(index);
                return false;
            }
        });
    }

    //表格查询
    function search() {
        var field = serializeJson($('#searchForm'));
        var options = {where: field};
        layui.treeTable.reload('table_dept', options);
    }
</script>
</body>
</html>